<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    centered
    :maskClosable="false"
    destroyOnClose
    @ok="onFinish"
    title="新增任务"
    :confirm-loading="uploadLoading"
  >
    <a-form @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item label="视频上传">
        <a-upload
          v-model:file-list="fileList"
          accept=".mp4"
          action=""
          :max-count="1"
          :showUploadList="false"
          :customRequest="uploadFunc"
        >
          <a-button :loading="uploadLoading">选择文件</a-button>
        </a-upload>
        <span class="updateText margin-left-8">{{ name }}</span>
      </a-form-item>
      <a-form-item name="name" label="标识名称">
        <a-input v-model:value="formState.name" placeholder="请输入"></a-input>
      </a-form-item>
      <a-form-item name="sort" label="分组选择">
        <a-select
          placeholder="请选择"
          v-model:value="formState.groupId"
          style="width: 100%"
          :field-names="{ label: 'name', value: 'id' }"
          :options="groupOptions"
        ></a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { onMounted, reactive, toRefs, ref, watch, computed } from "vue";
import { message } from "ant-design-vue";
import { updateVideoTask, getGroupList } from "@/api/marathon";
import { uploadFile } from "@/api/common";

export default {
  name: "UnderstandAddModal",
  props: {
    modalVisible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      init();
      initOptions();
    });
    const init = () => {};

    const state = reactive({
      confirmLoading: false,
      visible: ref(props.modalVisible),
      fileList: [],
      groupOptions: [],
      formState: {
        name: "",
        groupId: null,
        filepath: null,
      },
      uploadLoading: false,
    });

    watch(
      () => props.modalVisible,
      (value) => {
        if (!value) {
          resetFields();
        } else {
          initOptions();
        }
        state.visible = value;
      }
    );

    const resetFields = () => {
      state.fileList = [];
    };

    const initOptions = () => {
      const dto = {
        pageNumber: 1,
        pageSize: 1000,
      };
      getGroupList(dto).then((res) => {
        if (res.result === true) {
          let { responseList = [] } = res?.data;
          state.groupOptions = responseList;
        } else {
          message.error("获取分组列表失败：" + res.message);
        }
        state.loading = false;
      });
    };

    const handleCancel = () => {
      emit("cancel");
    };

    const name = computed(() => {
      if (!state.fileList || state.fileList.length < 1) {
        return "未选择任何文件";
      }
      return state.fileList[0].name;
    });

    const onFinish = () => {
      updateVideoTask(state.formState).then((res) => {
        if (res.result) {
          message.success("新增成功");
          emit("submit");
          emit("cancel");
        } else {
          message.error("新增失败");
        }
      });
    };

    const onFinishFailed = (errorInfo) => {
      message.error(errorInfo);
      console.log(errorInfo);
    };

    const uploadFunc = (res) => {
      state.uploadLoading = true;
      if (res.file) {
        const formData = new FormData();
        formData.append("file", res.file);
        uploadFile(formData).then((res) => {
          if (res.result) {
            state.formState.filepath = res.data;
          } else {
            message.error("上传失败");
          }
          state.uploadLoading = false;
        });
      }
    };

    return {
      ...toRefs(state),
      handleCancel,
      name,
      onFinish,
      onFinishFailed,
      uploadFunc,
    };
  },
};
</script>

<style lang="scss"></style>
